$(document).ready(function () {
    $('div.member').on('mouseenter mouseleave', function (e) {
        var size = e.type == 'mouseenter' ? 85 : 75;
        var padding = e.type == 'mouseenter' ? 0 : 5;
        $(this).find('img').stop().animate({
            width: size,
            height: size,
            paddintTop: padding,
            paddingLeft: padding
        });
    });
});

$(document).ready(function () {
    $('#fx-toggle').show().on('click', function () {
        $.fx.off = !$.fx.off;
    });
});

$(document).ready(function () {
    var $movable = $('<div id="movable"></div>')
        .appendTo('body');
    var bioBassStyles = {
        dispaly: 'none',
        height: '5px',
        width: '25px'
    },
        bioEffects = {
            duration: 'zippy', // exercise 1
            easing: 'easeOutQuart',
            specialEasing: { opaciity: 'linear' }
        };

    function showBio() {
        var $member = $(this).parent(),
            $bio = $member.find('p.bio'),
            startStyles = $.extend(bioBassStyles, $member.offset()),
            endStyles = {
                width: $bio.width(),
                top: $member.offset().top + 5,
                left: $member.width() + $member.offset().left - 5,
                opacity: 'show'
            };
        $movable.html($bio.clone())
            .css(startStyles)
            // .stop() // exercise 5 if animating stop it
            .animate(endStyles, bioEffects)
            .animate({ height: $bio.height() }, { easing: 'easeOutQuart' });
    }

    $.fx.speeds._default = 250;
    // exercise 1
    $.fx.speeds.zippy = 100;

    function showDetails() {
        var $member = $(this);
        if ($member.hasClass('active')) {
            return;
        }
        $movable.fadeOut();
        $('div.member.active')
            .removeClass('active')
            .children('div')
            .fadeOut();
        $member
            .find('div').css({
                display: 'block',
                left: '-300px',
                top: 0
            })
            // .delay(2000) // exercise 4
            .each(function (index) {
                // exercise 2
                var bioBounce = {
                    effect: 'bounce',
                    times: '3'
                };
                $(this).animate({
                    left: 0,
                    top: 25 * index
                }, {
                        duration: 'zippy', // exercise 1
                        specialEasing: { top: 'easeInQuart' }
                    })
                    // .stop() // exercise 5 if animating stop it
                    .effect(bioBounce); // exercise 2
            })
            .promise()
            .done(selectedDetails) // exercise 3
            .done(showBio);
    }

    function selectedDetails() {
        $('div.name, div.location, div.position').css({ color: '#000' });
        $(this).css({ color: '#090' });
    }

    $('div.member').click(showDetails);
});